<template>
  <div>
    <el-form ref="dealForm" :rules="ruleForm" :model="dealForm"
             label-width="100px" class="demo-ruleForm" label-position="top">
      <el-form-item v-if="flowDealArr.length>0 || nodeType==1 " label="操作" prop="completeType">
        <el-radio-group v-model="dealForm.completeType" size="small" @change="change">
          <el-radio v-if="nodeType==1" border label="agree">同意</el-radio>
          <el-radio v-if="nodeType==1" border label="reject">不同意</el-radio>
          <el-radio v-for="(item,index) in flowDealArr" :key="index" border
                    :label="item.permCode" @click.native="handleTrigger($event)">{{ item.permCode|dealFilter }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="dealForm.completeType=='transfer'" label="转办人" prop="assigneeList">
        <personSelect ref="personPicker" v-model="dealForm.assigneeList" :multiple="false"
                      :reappear="true" :select-type="'person'" :tag-visible="true"
                      :api="api" />
      </el-form-item>
      <el-form-item v-if="isCountersign" label="加签" prop="addSignUser">
        <personSelect ref="personPicker" v-model="dealForm.addSignUser" :reappear="true"
                      :select-type="'person'" :tag-visible="true" :api="api" />
      </el-form-item>
      <el-form-item v-if="isReduce" label="减签" prop="reduceSignUser">
        <personSelect ref="personPicker" v-model="dealForm.reduceSignUser" :reappear="true"
                      :select-type="'person'" :tag-visible="true" :api="api" />
      </el-form-item>
      <el-form-item v-if="iscarbonUser||iscs" label="抄送" prop="carbonUser">
        <personSelect ref="personPicker" v-model="dealForm.carbonUser" :params="params"
                      :search-user-params="searchUserParams" :search-org-params="searchOrgParams" :reappear="true"
                      :select-type="'person'" :tag-visible="true" :api="api"
                      :disabled="iscs?false:true" />
      </el-form-item>
      <el-form-item v-if="nodeType==1 ||nodeType==3 " :key="dealForm.completeType" label="意见"
                    :prop="dealForm.completeType!=='agree'&&dealForm.completeType!=='transfer'?'comment':''">
        <el-input
          v-model="dealForm.comment"
          class="limit"
          type="textarea"
          :rows="2"
          maxlength="100"
          placeholder="请输入"
          show-word-limit
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getPermList, getManagingOrgUserList, searchUserName, getUserListByUserIds, searchOrgName } from '@/framework/api/affairManage/flowDetail/Config'

export default {
  filters: {
    dealFilter(type) {
      const filter = { agree: '同意', overruled: '退回', reject: '不同意', countersign: '加签', transfer: '转办' }
      return filter[type]
    }
  },
  components: {
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    // flowDealDetail: {
    //   type: Object
    // },
    formData: {
      type: String,
      default: ''
    },
    // flowDealArr: {
    //   type: Array,
    //   default: () => {
    //     return []
    //   }
    // }
    // deploymentId: {
    //   type: String,
    //   default: ''
    // },
    iscarbonUser: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      flowDealDetail: {},
      dialogVisible: false,
      ruleForm: {
        comment: [
          { required: true, message: '请输入意见', trigger: 'blur' }
        ],
        assigneeList: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      },
      dealForm: {
        formType: '',
        taskId: '', // 任务id
        formData: '',
        completeType: 'agree', // 提交类型（agree-同意、reject-不同意、overruled-驳回、countersign-加签、transfer-转办）
        comment: '', // 审批意见
        isOrNoCarbon: '', // 是否抄送 Y/N
        carbonUser: '', // 抄送人
        addSignUser: '', // 加签
        assigneeList: '', // 转办
        reduceSignUser: '', // 减签
        variables: {}
      },
      params: {
        instanceId: '',
        nodeId: '',
        isFlowCarbonUser: false

      },
      searchUserParams: {
        instanceId: '',
        nodeId: '',
        isFlowCarbonUser: false
      },
      searchOrgParams: {
        instanceId: '',
        nodeId: '',
        isFlowCarbonUser: false
      },
      flowDealArr: [],
      iscs: false,
      isReduce: false,
      isCountersign: false,
      reduceSignUserArr: [],
      reduceSignUserList: [],
      api: { getManagingOrgUserList, searchUserName, getUserListByUserIds, searchOrgName },
      carbonUser: '',
      nodeType: ''
    }
  },
  created() {
  },
  methods: {
    // 获取审批节点 操作
    getflowableToDoTask(flowDealDetail, taskId) {
      this.dealForm.carbonUser = flowDealDetail.carbonUser
      this.flowDealDetail = flowDealDetail
      this.nodeType = this.flowDealDetail.nodeType
      this.params.instanceId = flowDealDetail.instanceId
      this.searchUserParams.instanceId = flowDealDetail.instanceId
      this.searchOrgParams.instanceId = flowDealDetail.instanceId
      getPermList({ instanceId: this.flowDealDetail.instanceId, taskId }).then((res) => {
        if (res.data.length > 0) {
          this.$emit('getflowDealArr', true)
          this.params.nodeId = res.data[0].nodeId
          this.searchUserParams.nodeId = res.data[0].nodeId
          this.searchOrgParams.nodeId = res.data[0].nodeId
          this.flowDealArr = res.data.filter((item) => {
            if (item.permCode === 'cc') this.iscs = true
            if (item.permCode === 'reduced') this.isReduce = true
            if (item.permCode === 'countersign') this.isCountersign = true
            return item.permCode !== 'cc' && item.permCode !== 'reduced' && item.permCode !== 'countersign'
          })
        } else {
          this.$emit('getflowDealArr', false)
        }
      })
    },
    change(val) {
      this.$refs.dealForm.clearValidate()
      this.dealForm.addSignUser = '' // 转办 加签 切换时清空选项
      this.dealForm.assigneeList = '' // 加签 切换时清空选项
      this.dealForm.reduceSignUser = '' // 减签数据清空
      //   this.dealForm.carbonUser = '' // 抄送数据清空
      this.dealForm.comment = '' // 意见数据清空
    },
    dealSubmitForm(taskId) {
      this.carbonUser = this.dealForm.carbonUser
      Object.assign(this.dealForm, this.flowDealDetail)
      this.dealForm.carbonUser = this.carbonUser
      this.dealForm.taskId = taskId
      this.dealForm.isOrNoCarbon = this.dealForm.carbonUser ? 'Y' : 'N'
      this.dealForm.variables = {}
      this.$refs['dealForm'].validate(async (valid) => {
        if (valid) {
          this.$emit('getdealForm', this.dealForm)
        }
      })
    },
    handleTrigger($event) {
      const _this = this
      const objVal = this.dealForm.completeType
      window.setTimeout(() => {
        if (!!objVal && objVal == $event.target.value) {
          $event.target.checked = false
          _this.$refs['dealForm'].resetFields()
        }
      }, 0)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-radio--small{
  width: 40% !important;
  margin-right: 0px !important;
  margin-left: 16px !important;
  margin-top: 8px !important;
}
.el-radio--small:nth-child(odd){
  margin-left:0px !important;
}
.el-radio-group {
    width: 120%;
}
.formbtnsbox{
  display: flex;
  align-items: center;
  justify-content: center;
}
.select-person-click{
  border: 1px #c0c4cc solid;
  border-radius: 5px;
  cursor: pointer;
  // min-height:40px;
  width: 100%;
  height:100%;
  padding: 0px 8px 0 8px;
  // line-height: 28px;
  margin: auto;
  min-height: 36px;
}
</style>
